<template>
  <div>
    <Container class="nav">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        :router="true"
        background-color="#333333"
        text-color="#ffffff"
        active-text-color="#ffd04b">
        <el-menu-item index="/">首页</el-menu-item>
        <el-sub-menu index="2">
          <template #title>律师文集</template>
          <el-menu-item
            v-for="item in categories_store.categories"
            :key="item.id"
            :index="'/post/list/' + item.id"
            :route="{ path: `/post/list/${item.id}` }">
            {{ item.name }}
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item index="/about">律师介绍</el-menu-item>
      </el-menu>
    </Container>
  </div>
</template>

<script setup lang="ts">
const route = useRoute();
const activeIndex = ref(route.path);
const categories_store = useCategories();
const { data: categories } = await useAsyncData('categories', async () => categories_store.getCategories(), { server: true });

watchEffect(() => {
  activeIndex.value = route.path;
});
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>

<style scoped>
.nav {
  background-color: #333333;
}
.el-menu--horizontal {
  height: 50px;
}
.el-menu--horizontal.el-menu {
  border-bottom: none;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: none;
}
</style>
